<template>
	<u-list :height="screenHeight">
		<view>
			<!-- 详情描述 -->
			<view class="description-box">
				<text class="des-title">请详细描述你的病情：</text>
				<u--textarea v-model="directionValue" placeholder="请输入病情内容" height="100" count border="none"></u--textarea>
			</view>
			<!-- 是否需要指导用药 -->
			<view class="direction-box">
				<u-checkbox-group v-model="isDirection" placement="row" shape="circle" @change="changeValue">
					<u-checkbox activeColor="red" :label="checkboxList1.lable" :name="checkboxList1.name"></u-checkbox>
				</u-checkbox-group>
			</view>
			<!-- 上传患者报告 -->
			<view class="upload-report">
				<view class="upload-title">上传检查报告或患处照片：</view>
				<view class="upload-box"><u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"></u-upload></view>
			</view>
			<!-- 选择就诊人 -->
			<view class="seePerson">
				<view class="seePerson-title">选择就诊人：</view>
				<view class="seePerson-box">
					<view class=""><u--image width="66" height="66" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"></u--image></view>
					<view class="person" @click="goSubmet">选择就诊人></view>
				</view>
			</view>
			<!-- 底部按钮 -->
			<view class="sub-box">
				<view class="sub-btn"><u-button type="primary" @click="cancel" color="#9eceff" text="取消"></u-button></view>
				<view class="sub-btn"><u-button type="primary" text="提交"></u-button></view>
			</view>
		</view>
	</u-list>
</template>

<script>
export default {
	data() {
		return {
			// 记录数据
			isDirection:[],
			// 复选框要用的数据
			checkboxList1: {
				name: false,
				lable:'是否需要医生指导用药'
			},
			directionValue: '',
			// 上传照片
			fileList1: [],
			// 页面高度
			screenHeight:0
		};
	},
	methods: {
		changeValue(n) {
			// console.log(this.isDirection);
			this.isDirection = n;
		},
		goSubmet(){
			uni.navigateTo({
				url:"../myPatient/managePatient/managePatient"
			})
		},
		// 取消按钮
		cancel(){
			uni.navigateBack({delta: 1})
		},
		//删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map(item => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: res => {
						setTimeout(() => {
							resolve(res.data.data);
						}, 1000);
					}
				});
			});
		}
	},
	mounted(){
		//获取页面高度
		this.screenHeight = uni.getSystemInfoSync().windowHeight - 60; //获取当前页面的高度
	}
};
</script>

<style lang="less">
page {
	background-color: #fafafa;
	padding: 10rpx;
}
// 详细描述
.description-box {
	background-color: #ffffff;
	padding-top: 10rpx;
	.des-title {
		font-weight: 600;
		margin: 20rpx;
	}
}
// 指导用药
.direction-box {
	background-color: #ffffff;
	margin: 10rpx 0;
	height: 60rpx;
	padding-left: 10rpx;
	display: flex;
	align-items: center;
}
// 上传照片
.upload-report {
	background-color: #ffffff;
	height: 300rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	.upload-title {
		font-weight: 600;
		margin: 20rpx;
	}
	.upload-box {
		padding: 30rpx;
	}
}
// 选择就诊人
.seePerson {
	margin-top: 20rpx;
	background-color: #ffffff;
	height: 260rpx;
	display: flex;
	flex-direction: column;
	.seePerson-title {
		font-weight: 600;
		margin: 20rpx;
	}
	.seePerson-box {
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.person {
			color: #74a4f0;
		}
	}
}
.sub-box {
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1rpx #f5f5f5 solid;
	padding: 0 26rpx;
	height: 120rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	.sub-btn {
		width: 44%;
	}
}
</style>
